<!-- manpower人力资源 -->
<template>
    <div class="container-manpower">
        <van-nav-bar title="人力资源" @click-left="goBack">
            <span class="el-icon-arrow-left fontsize" slot="left"></span>
        </van-nav-bar>
        <!--上传-->
        <van-row gutter="20" class="wrapper manpower-upload-box" style="margin-left:0;margin-right:0;">
            <van-col span="8">
                <van-uploader :after-read="onRead" class="manpower-upload"
                              :style='{backgroundImage: "url(" + form.Photo + ")"}'>
                    <van-icon name="plus" v-show='!form.Photo'/>
                </van-uploader>
            </van-col>
            <van-col span="16" class="manpower-upload-txt">
                <span>点击上传图片</span>
                <span class="txt-info">建议尺寸100*100 大小不能超过1M</span>
            </van-col>
        </van-row>
        <!--姓名-->
        <van-cell-group>
            <van-field placeholder="请输入名称" label="姓名：" v-model="form.UserName"/>
        </van-cell-group>
        <!--性别-->
        <van-row class="gender">
            <van-col span="4" class="gender-txt">性别：</van-col>
            <van-col span="20">
                <van-radio-group v-model="form.Gender">
                    <van-radio name="134">男</van-radio>
                    <van-radio name="135">女</van-radio>
                </van-radio-group>
            </van-col>
        </van-row>
        <!--民族-->
        <van-cell-group>
            <van-field placeholder="请输入民族" clearable label="民族：" v-model="form.Nation"/>
        </van-cell-group>
        <!--身份证号-->
        <van-cell-group class="idnum">
            <van-field placeholder="请输入身份证" clearable label="身份证：" v-model="form.IdentityCard"/>
        </van-cell-group>
        <!--手机号-->
        <van-cell-group class="phoneNumber">
            <van-field placeholder="请输入手机号" clearable label="手机号：" v-model="form.Mobile"/>
        </van-cell-group>
        <!--省份-->
        <van-cell-group>
            <van-field
                    placeholder="请选择省份"
                    label="省份："
                    right-icon="arrow"
                    readonly
                    v-model="province"
                    @click="choiceProvince"
            />
        </van-cell-group>
        <van-popup v-model="province_show" position="bottom" :close-on-click-overlay="true" class="iPopup">
            <van-area
                    :area-list="areaList"
                    @cancel="onProvinceCancel"
                    @confirm="onProvinceConfirm"
            />
        </van-popup>
        <!--家庭地址-->
        <van-cell-group>
            <van-field v-model="form.DetailAddress" type="textarea" placeholder="请输入详细家庭地址" rows="2" autosize/>
        </van-cell-group>
        <!--实名卡账号-->
        <van-cell-group class="realNameCard">
            <van-field placeholder="请输入" label="实名卡账号：" v-model="form.UnionCard"/>
        </van-cell-group>
        <!--班组-->
        <van-cell-group>
            <van-field
                    placeholder="请选择班组"
                    label="班组："
                    right-icon="arrow"
                    readonly
                    v-model="team"
                    @click="choiceTeam"
            />
        </van-cell-group>
        <van-popup v-model="team_show" position="bottom" class="iPopup">
            <van-picker
                    show-toolbar
                    title="班组"
                    :columns="team_columns"
                    @cancel="onTeamCancel"
                    @confirm="onTeamConfirm"
            />
        </van-popup>
        <!--公司-->
        <van-cell-group class="company">
            <van-field
                    placeholder="请选择公司"
                    label="所属公司："
                    right-icon="arrow"
                    readonly
                    v-model="company"
                    @click="choiceCompany"
            />
        </van-cell-group>
        <van-popup v-model="company_show" position="bottom" class="iPopup">
            <van-picker
                    show-toolbar
                    title="所属公司"
                    :columns="company_columns"
                    @cancel="onCompanyCancel"
                    @confirm="onCompanyConfirm"
            />
        </van-popup>
        <!--工资卡号-->
        <van-cell-group class="payCard">
            <van-field placeholder="请输入" label="工资卡号：" v-model="form.WageCard"/>
        </van-cell-group>
        <!--门禁卡号-->
        <van-cell-group class="guardCard">
            <van-field placeholder="请输入" label="门禁卡号：" v-model="form.ACCard"/>
        </van-cell-group>
        <!--劳动合同签署状态-->
        <van-cell-group class="laborContractState">
            <van-field
                    placeholder="请选择状态"
                    label="劳动合同签署状态："
                    right-icon="arrow"
                    readonly
                    v-model="laborContractState"
                    @click="choiceLaborContractState"
            />
        </van-cell-group>
        <van-popup v-model="laborContract_show" position="bottom" class="iPopup">
            <van-picker
                    show-toolbar
                    title="劳动合同签署状态"
                    :columns="laborContractStateData"
                    @cancel="onlaborContractCancel"
                    @confirm="onlaborContractConfirm"
            />
        </van-popup>
        <!--安全培训状态-->
        <van-cell-group class="safetyTrainingState">
            <van-field
                    placeholder="请选择状态"
                    label="安全培训状态："
                    right-icon="arrow"
                    readonly
                    v-model="safetyTrainingState"
                    @click="choiceSafetyTrainingState"
            />
        </van-cell-group>
        <van-popup v-model="choiceSafety_show" position="bottom" class="iPopup">
            <van-picker
                    show-toolbar
                    title="安全培训状态"
                    :columns="safetyTrainingStateData"
                    @cancel="onchoiceSafetyCancel"
                    @confirm="onchoiceSafetyConfirm"
            />
        </van-popup>
        <!--是否特种-->
        <van-row class="gender workPermit">
            <van-col span="11" class="gender-txt">是否有特种作业证号：</van-col>
            <van-col span="13">
                <van-radio-group v-model="form.HasSpecialPermit">
                    <van-radio :name="true">有</van-radio>
                    <van-radio :name="false">无</van-radio>
                </van-radio-group>
            </van-col>
        </van-row>
        <!--特种号-->
        <van-cell-group class="workPermitNum">
            <van-field placeholder="请输入" label="特种作业证证号：" v-model="form.SpecialPermitNo"/>
        </van-cell-group>
        <!--操作类别-->
        <van-cell-group class="operationCategory">
            <van-field placeholder="操作类别" label="操作类别：" v-model="form.OperateMethod"/>
        </van-cell-group>
        <!--初次领证日期-->
        <van-cell-group class="certificationDate">
            <van-field
                    placeholder="请选择日期"
                    label="初次领证日期："
                    right-icon="calender-o"
                    readonly
                    v-model="form.FirstPermitDate"
                    @click="choiceCertificationDate"
            />
        </van-cell-group>
        <van-popup v-model="certificationDate_show" position="bottom" class="iPopup">
            <van-datetime-picker
                    v-model="currentDate"
                    type="date"
                    @cancel="onCertificationDateCancel"
                    @confirm="onCertificationDateConfirm"
            />
        </van-popup>

        <div class="glen">使用期限</div>
        <!--开始日期-->
        <van-cell-group class="beginTime">
            <van-field
                    placeholder="请选择日期"
                    label="开始日期："
                    right-icon="calender-o"
                    readonly
                    v-model="form.StartUseDate"
                    @click="choiceBeginTime"
            />
        </van-cell-group>
        <van-popup v-model="beginTime_show" position="bottom" class="iPopup">
            <van-datetime-picker
                    v-model="currentTime"
                    type="date"
                    @cancel="onBeginTimeCancel"
                    @confirm="onBeginTimeConfirm"
            />
        </van-popup>
        <!--结束日期-->
        <van-cell-group class="endTime">
            <van-field
                    placeholder="请选择日期"
                    label="结束日期："
                    right-icon="calender-o"
                    readonly
                    v-model="form.EndUseDate"
                    @click="choiceEndTime"
            />
        </van-cell-group>
        <van-popup v-model="endTime_show" position="bottom" class="iPopup">
            <van-datetime-picker
                    v-model="currentEndTime"
                    type="date"
                    @cancel="onEndTimeCancel"
                    @confirm="onEndTimeConfirm"
            />
        </van-popup>

        <van-row class="iButton">
            <van-col span="22" offset="1">
                <van-button type="info" size="large" @click='createData'>确认</van-button>
            </van-col>
        </van-row>
    </div>
</template>

<script>
    import {
        UploadImages,
        GetClassGroupToCbx,
        GetAllProCityAreaList,
        GetOrgList,
        GetDictInfoList,
        AddClassMember
    } from '@/api/api'
    import areaList from '@/assets/js/area'
    import areaList2 from '@/assets/js/area2'

    export default {
        data() {
            return {
                currentAction: null,
                province_show: false,  //
                workType_show: false,  //工种van-actionsheet是否显示
                team_show: false,  //班组van-popup是否显示
                company_show: false,  //所属公司van-popup是否显示
                certificationDate_show: false,  //初次领证日期van-popup是否显示
                beginTime_show: false,  //开始时间van-popup是否显示
                endTime_show: false,  //结束时间van-popup是否显示
                laborContract_show: false,  //van-actionsheet是否显示
                choiceSafety_show: false,  //van-actionsheet是否显示
                data: "manpower人力资源",
                laborContractStateData: [],
                safetyTrainingStateData: [],
                province: '',
                team: "",
                team_columns: [], // 班组
                company: "",
                company_columns: [], // 公司
                laborContractState: "",  //劳动合同签署状态
                safetyTrainingState: "",  //安全培训状态
                certificationDate: "",  //初次领证日期
                currentDate: new Date(),
                beginTime: "",
                currentTime: "",
                endTime: "",
                currentEndTime: "",
                areaList,
                form: {
                    Photo: "",  //头像
                    UserName: "",//姓名
                    IdentityCard: '',//身份证
                    Mobile: '',//手机
                    UnionCard: '',//实名卡账号
                    WageCard: '',//工资卡号
                    ACCard: '',//门禁卡号
                    SignStatus: '',//劳动合同签署状态
                    TrainStatus: '',//安全培训状态
                    HasSpecialPermit: '',//是否有特种作业证
                    SpecialPermitNo: "",  //特种作业证号
                    OperateMethod: "",  //操作类别
                    GroupID: "", //班组ID
                    OrgID: "",  //公司
                    DetailAddress: '',//详细地址
                    Nation: '', //民族
                    FirstPermitDate: "",  //初次领证日期
                    StartUseDate: "",  //开始使用时间
                    EndUseDate: "",  //结束使用时间
                    Gender: "",//性别（男：M，女：F）
                    Province: "", //已选择的省份
                    City: "", //已选择的市
                    Area: "", //已选择的区/镇
                    ProjectID: localStorage.getItem('projectid')
                }
            };
        },
        mounted() {
            this.getGroup()
            this.getOrgList()
            this.getDictInfoList('劳动合同签署状态')
            this.getDictInfoList('安全培训状态')
        },
        methods: {
            //上传图片
            async onRead(file) {
                let prams = [{
                    key: 'files', value: file.file
                }]
                let upload_images = await this.Request(UploadImages(prams))
                if (upload_images.StatusCode == 200) {
                    this.form.Photo = upload_images.Detiel[0].TokenUrL + upload_images.Detiel[0].URL
                } else {
                    this.$message({
                        type: 'error',
                        message: upload_images.message ? upload_images.message : '后台异常',
                        center: 'true'
                    })
                }
            },
            /**
             * 选择省份操作
             */
            onProvinceConfirm(val) {
                this.province = val[0].name + val[1].name + val[2].name;
                this.form.Province = areaList2.province_list[val[0].code].key
                this.form.City = areaList2.city_list[val[1].code].key
                this.form.Area = areaList2.county_list[val[2].code].key
                this.province_show = false;
            },
            onProvinceCancel() {
                this.province_show = false;
            },
            choiceProvince() {
                if (!this.province_show) {
                    this.province_show = true;
                } else {
                    this.province_show = false;
                }
            },
            /**
             * van-popup 显示/隐藏操作
             */
            choiceTeam() {
                if (!this.team_show) {
                    this.team_show = true;
                } else {
                    this.team_show = false;
                }
            },
            choiceCompany() {
                if (!this.company_show) {
                    this.company_show = true;
                } else {
                    this.company_show = false;
                }
            },
            /**
             * 选择初次领证日期
             */
            choiceCertificationDate() {
                if (!this.certificationDate_show) {
                    this.certificationDate_show = true;
                } else {
                    this.certificationDate_show = false;
                }
            },
            onCertificationDateConfirm(value) {
                this.form.FirstPermitDate = require('moment')(value).format('YYYY-MM-DD');
                this.certificationDate_show = false;
            },
            onCertificationDateCancel() {
                this.certificationDate_show = false;
            },
            /**
             * @name 获取单位列表
             * @msg type为单位类型(1:建设单位,2:勘察单位,3:设计单位,4:监理单位,5:施工单位,6:其他单位)
             * @param {string} projectId 项目ID
             */
            async getOrgList() {
                let orgData = await this.Request(GetOrgList({projectId: localStorage.getItem('projectid')}));
                if (orgData.StatusCode === 200) {
                    this.company_columns = orgData.Detiel.map(v => {
                        return {
                            id: v.ID,
                            text: v.Name
                        }
                    })
                } else {
                    this.$message({
                        type: "error",
                        message: orgData.Message,
                        center: "true"
                    });
                }
            },
            /**
             * @name 根据项目ID获班组下拉列表
             * @param {string} projectId 项目ID
             */
            getGroup() {
                this.Request(GetClassGroupToCbx({projectId: localStorage.getItem('projectid')})).then(res => {
                    if (res.StatusCode == '200') {
                        this.team_columns = res.Detiel
                    } else {
                        this.$message({type: 'error', message: res.Message, center: 'true'});
                    }
                })
            },
            /**
             * @name 获取数据字典列表
             * @msg 包括：安全培训状态、工种、劳动合同签署状态、性别
             */
            async getDictInfoList(label) {
                let data = await this.Request(GetDictInfoList({
                    ProjectID: localStorage.getItem('projectid'),
                    DICode: label
                }));
                if (data.StatusCode === 200) {
                    if (data.Detiel.length > 0) {
                        if (label == "劳动合同签署状态") {
                            this.laborContractStateData = data.Detiel.map(v => {
                                return {
                                    id: v.ID,
                                    text: v.cDIName
                                }
                            })
                        } else if (label == "安全培训状态") {
                            this.safetyTrainingStateData = data.Detiel.map(v => {
                                return {
                                    id: v.ID,
                                    text: v.cDIName
                                }
                            })
                        }
                    }
                } else {
                    this.$message({
                        type: "error",
                        message: data.Message,
                        center: "true"
                    });
                }
            },
            /**
             * 选择劳动合同签署状态
             */
            choiceLaborContractState() {
                if (!this.laborContract_show) {
                    this.laborContract_show = true;
                } else {
                    this.laborContract_show = false;
                }
            },
            onlaborContractConfirm(value) {
                this.laborContractState = value.text;
                this.form.SignStatus = value.id;
                this.laborContract_show = false;
            },
            onlaborContractCancel() {
                this.laborContract_show = false;
            },
            /**
             * 选择安全培训状态
             */
            choiceSafetyTrainingState() {
                if (!this.choiceSafety_show) {
                    this.choiceSafety_show = true;
                } else {
                    this.choiceSafety_show = false;
                }
            },
            onchoiceSafetyConfirm(value) {
                this.safetyTrainingState = value.text;
                this.form.TrainStatus = value.id;
                this.choiceSafety_show = false;
            },
            onchoiceSafetyCancel() {
                this.choiceSafety_show = false;
            },
            /**
             * 选择班组
             */
            onTeamConfirm(value) {
                this.team = value.text;
                this.form.GroupID = value.id;
                this.team_show = false;
            },
            onTeamCancel() {
                this.team_show = false;
            },
            /**
             * 选择所属公司
             */
            onCompanyConfirm(value) {
                this.company = value.text;
                this.form.OrgID = value.id;
                this.company_show = false;
            },
            onCompanyCancel() {
                this.company_show = false;
            },
            /**
             * 选择与取消开始时间操作
             */
            onBeginTimeConfirm(value) {
                this.form.StartUseDate = require('moment')(value).format('YYYY-MM-DD');
                this.beginTime_show = false;
            },
            onBeginTimeCancel() {
                this.beginTime_show = false;
            },
            choiceBeginTime() {
                if (!this.beginTime_show) {
                    this.beginTime_show = true;
                } else {
                    this.beginTime_show = false;
                }
            },
            choiceEndTime() {
                if (!this.endTime_show) {
                    this.endTime_show = true;
                } else {
                    this.endTime_show = false;
                }
            },
            /**
             * 选择与取消结束时间操作
             */
            onEndTimeConfirm(value) {
                this.form.EndUseDate = require('moment')(value).format('YYYY-MM-DD');
                this.endTime_show = false;
            },
            onEndTimeCancel() {
                this.endTime_show = false;
            },
            // 提交
            createData() {
                for (let k in this.form){
                  console.log(k)
                  if (this.form[k] === '') {
                        this.$toast.fail({
                            message: '请完整填写表单',
                            className: 'my_toast'
                        });
                        return
                    }
                }
                this.$toast.loading({
                    duration: 0,       // 持续展示 toast
                    forbidClick: true, // 禁用背景点击
                    loadingType: 'spinner',
                    message: '保存中...'
                });
                this.Request(AddClassMember(this.form)).then(data => {
                    if (data.StatusCode === 200) {
                        this.$toast.clear();
                        this.$toast('添加成功');
                        this.form = {
                            Photo: "",  //头像
                            UserName: "",//姓名
                            IdentityCard: '',//身份证
                            Mobile: '',//手机
                            UnionCard: '',//实名卡账号
                            WageCard: '',//工资卡号
                            ACCard: '',//门禁卡号
                            SignStatus: '',//劳动合同签署状态
                            TrainStatus: '',//安全培训状态
                            HasSpecialPermit: '',//是否有特种作业证
                            SpecialPermitNo: "",  //特种作业证号
                            OperateMethod: "",  //操作类别
                            GroupID: "", //班组ID
                            OrgID: "",  //公司
                            DetailAddress: '',//详细地址
                            Nation: '', //民族
                            FirstPermitDate: "",  //初次领证日期
                            StartUseDate: "",  //开始使用时间
                            EndUseDate: "",  //结束使用时间
                            Gender: "",//性别（男：M，女：F）
                            Province: "", //已选择的省份
                            City: "", //已选择的市
                            Area: "", //已选择的区/镇
                            ProjectID: localStorage.getItem('projectid')
                        }
                        this.province = ""
                        this.team = ""
                        this.company = ""
                        this.laborContractState = ""
                        this.safetyTrainingState = ""
                        this.certificationDate = ""
                    } else {
                        this.$toast.clear();
                        this.$message({
                            type: "error",
                            message: data.Message,
                            center: "true"
                        });
                    }
                });
            },
            goBack() {
                this.$router.push({path: "/nav/to/index"});
            }
        }
    };
</script>
<style lang='stylus' scoped rel='stylesheet/stylus'>
    .container-manpower {
        width: 100%;
        height: 100%;
    }
</style>

<style>
    .container-manpower .van-cell .van-icon {
        font-size: 34px;
    }

    .container-manpower .idnum .van-field__label,
    .container-manpower .phoneNumber .van-field__label {
        max-width: 120px;
    }

    .container-manpower .realNameCard .van-field__label {
        max-width: 180px;
    }

    .container-manpower .company .van-field__label,
    .container-manpower .payCard .van-field__label,
    .container-manpower .guardCard .van-field__label,
    .container-manpower .operationCategory .van-field__label,
    .container-manpower .beginTime .van-field__label,
    .container-manpower .endTime .van-field__label {
        max-width: 150px;
    }

    .container-manpower .laborContractState .van-field__label {
        max-width: 270px;
    }

    .container-manpower .safetyTrainingState .van-field__label,
    .container-manpower .certificationDate .van-field__label {
        max-width: 210px;
    }

    .container-manpower .workPermitNum .van-field__label {
        max-width: 240px;
    }

    /* Popup begin */
    .iPopup .van-picker-column {
        font-size: 30px;
    }

    .iPopup .van-picker__cancel,
    .iPopup .van-picker__confirm,
    .iPopup .van-picker__title {
        font-size: 30px;
    }

    .iPopup .van-picker__toolbar {
        height: 88px;
        line-height: 88px;
    }
    .my_toast {
        width: 180px;
        height: 150px;
    }

    /* Popup end */
    .container-manpower .van-cell .van-field__label span {
        font-weight: 600;
    }
</style>

<style scoped>
    .c-999999 {
        color: #999999;
    }

    .mt-20 {
        margin-top: 20px;
    }

    /* 头部 begin */
    .container-manpower .van-nav-bar {
        height: 88px;
        line-height: 88px;
    }

    .container-manpower .van-nav-bar__title {
        font-size: 36px;
        /* font-family: 'Microsoft YaHei'; */
        font-weight: 600;
    }

    .van-cell.van-field /deep/ .van-field__control:disabled {
        color: #333;
    }

    .container-manpower .van-nav-bar__left,
    .container-manpower .van-nav-bar__right {
        font-size: 42px;
    }

    /* 头部 end */

    .wrapper {
        padding: 0 20px;
    }

    .manpower-upload-box {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px 0;
    }

    .manpower-upload {
        width: 200px;
        height: 200px;
        border: 1px lightgray dashed;
        display: flex;
        justify-content: center;
        align-items: center;
        background-size: cover;
        background-position: center;
    }

    .manpower-upload .van-icon {
        font-size: 36px;
    }

    .manpower-upload-txt {
        font-size: 30px;
    }

    .manpower-upload-txt span {
        display: block;
    }

    .manpower-upload-txt .txt-info {
        font-size: 28px;
        color: #999999;
        margin-top: 20px;
    }

    .container-manpower .van-cell {
        font-size: 30px;
        font-family: 'Microsoft YaHei';
        line-height: 88px;
    }

    .container-manpower .van-hairline--top-bottom::after {
        /* left: -330px;
        right: -330px; */
        border-color: #E5E5E5;
    }

    /* 性别 begin */
    .gender {
        background-color: #fff;
        font-size: 30px;
        line-height: 88px;
        padding: 10px 20px;
    }

    .gender .gender-txt {
        font-size: 30px;
        font-weight: 600;
    }

    .gender .van-radio-group {
        display: flex;
        flex-direction: row;
    }

    .gender .van-radio-group .van-radio {
        margin-right: 50px;
    }
    .gender .van-radio-group .van-radio /deep/ .van-radio__icon {
        height: 30px;
    }
    .gender .van-radio-group .van-radio /deep/ .van-radio__icon, .gender .van-radio-group .van-radio /deep/ .van-radio__label {
        line-height: 30px;
    }
    .gender .van-radio-group .van-radio /deep/ .van-radio__icon .van-icon {
        font-size: 28px;
        width: 30px;
        height: 30px
    }
    /* 性别 end */
    .iActionsheet .van-actionsheet__item {
        height: 88px;
        line-height: 88px;
        font-size: 30px;
    }

    .iButton {
        margin: 30px 0;
    }

    .iButton .van-button--large {
        height: 88px;
        line-height: 88px;
        border-radius: 10px;
    }

    .iButton .van-button--large .van-button__text {
        font-size: 30px;
    }

    .choiceTeam::after {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 20px;
        content: "";
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        background-color: #f6f8fa;
    }

    /* 使用期限 */
    .glen {
        height: 88px;
        line-height: 88px;
        background: #f6f8fa;
        font-size: 30px;
        padding: 0 20px;
        font-weight: 600;
    }
</style>
